<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-time>
				<div style="margin:0 20px">
					<date-picker
						@change="
							val => crud.refresh({ startTime: val[0], endTime: val[1], page: 1 })
						"
						@refresh="crud.refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>
				</div>
				<el-button @click="updateConfig">默认配置</el-button>
			</template>
			<template #table-column-time="{scope}">
				{{ scope.row.time | dateFormatLine }}
			</template>
			<template #table-column-type="{scope}">
				<el-tag v-if="scope.row.type == 2">是</el-tag>
				<el-tag v-if="scope.row.type == 1">否</el-tag>
			</template>
			<template #table-column-bybtRedEnvelopeAmount="{scope}">
				{{ scope.row.bybtRedEnvelopeAmount }}
			</template>
		</cl-crud>
	</div>
</template>

<script>
import moment from 'moment';
import numberSection from './components/numberSection';
import DatePicker from '@/components/common/date-picker';

export default {
	data() {
		return {
			crud: null,
			config: null
		};
	},

	mounted() {},
	components: {
		numberSection,
		DatePicker
	},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.redEnvelopeRainConfig.red)
				.set('table', {
					columns: [
						{
							label: '红包时间场次',
							prop: 'time',
							align: 'center'
						},
						{
							label: '超级红包淘口令',
							prop: 'superRedEnvelopTkl',
							align: 'center'
						},
						{
							label: '用户首次默认场次',
							prop: 'type',
							align: 'center'
						},
						{
							label: '每场百亿补贴单个红包金额',
							prop: 'bybtRedEnvelopeAmount',
							align: 'center'
						}
					]
				})
				.set('upsert', {
					props: {
						width: '700px',
						labelWidth: '160px'
					},
					items: [
						{
							label: '红包时间场次',
							prop: 'time',
							span: 20,
							value: moment().format('YYYY-MM-DD HH:mm:ss'),
							component: {
								name: 'el-date-picker',
								props: {
									disabled: false,
									type: 'datetime'
								}
							},
							rules: {
								required: true,
								message: '请选择红包时间场次'
							}
						},
						{
							label: '用户是否首次默认场次',
							prop: 'type',
							span: 8,
							value: false,
							component: {
								name: 'el-switch'
							}
						},
						{
							label: '超级红包淘口令',
							prop: 'superRedEnvelopTkl',
							span: 20,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入超级红包淘口令',
									clearable: true
								}
							},
							rules: {
								required: true,
								message: '请输入超级红包淘口令'
							}
						},
						{
							label: '单个百亿补贴红包金额随机范围',
							prop: 'bybtRedEnvelopeAmount',
							span: 16,
							value: '0-0',
							component: {
								name: 'rangeMoney',
								props: {
									value: [String, Number]
								},
								methods: {
									input(val) {
										this.$emit('input', val);
									}
								},
								render() {
									return (
										<numberSection
											value={this.value}
											onInput={this.input}></numberSection>
									);
								}
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'slot-time', 'flex1'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					let { defaultConfig } = await next(params);
					this.config = defaultConfig;
				})
				.on('open', (isEdit, data) => {
					if (isEdit) {
						app.setForm('type', data.type == 2 ? true : false);
						app.setForm('time', data.time * 1000);
						app.setData('upsert.items[prop:time].component.props.disabled', true);
					} else {
						app.setData('upsert.items[prop:time].component.props.disabled', false);
					}
				})
				.on('submit', (isEdit, data, { next }) => {
					console.log(data);
					data.time = moment(data.time).unix();
					data.type = data.type ? 2 : 1;
					next({
						...data
					});
				})
				.done();

			app.refresh({
				prop: 'time',
				order: 'desc'
			});
			this.crud = app;
		},
		updateConfig() {
			this.crud.edit({
				...this.config
			});
		}
	}
};
</script>
<style lang="scss" scoped></style>
